import { CommonSmallTitle } from '../Assets/Common/SmallTitle'
import { useRef, useState, useEffect } from 'react'
import { useEventEmitter, useRequest, useSize } from 'ahooks'
import { useLocation } from 'react-router-dom'
import { Column } from '@ant-design/plots'
import { complexColumnTemplate } from '../Template'
import { ICON } from '../../../Common/Configure/Icon'
import { Line } from '@ant-design/plots'
import { Http } from '../../../Common/Api'
import { FrontModalBox } from '../Assets/Modal'
import { parseURLParams } from '../../../Common/Configure/Common'

const colorOne = ['rgba(135, 213, 255, 1)', 'rgba(57, 225, 195, 1)', 'rgba(233, 147, 255, 1)', 'rgba(95, 143, 255, 1)']

const colorTwo = [
    'rgba(135, 213, 255, 1)',
    'rgba(57, 225, 195, 1)',
    'rgba(233, 147, 255, 1)',
    'rgba(95, 143, 255, 1)',
    'rgba(110, 218, 128, 1)',
    'rgba(255, 121, 121, 1)',
]

const colorThr = [
    'rgba(135, 213, 255, 1)',
    'rgba(57, 225, 195, 1)',
    'rgba(233, 147, 255, 1)',
    'rgba(95, 143, 255, 1)',
    'rgba(110, 218, 128, 1)',
    'rgba(255, 121, 121, 1)',
]

export const SevOne = () => {
    const ChartTwo = useRef()
    const SizeTwo = useSize(ChartTwo)
    const ChartThr = useRef()
    const SizeThr = useSize(ChartThr)
    const ChartFou = useRef()
    const SizeFou = useSize(ChartFou)

    const { search } = useLocation()
    const { uuid } = parseURLParams(search)

    const [OptionsCall, setOptionsCall] = useState()

    const OptionsEvent = useEventEmitter()
    OptionsEvent.useSubscription(val => {
        console.log(val)
    })

    const { runAsync: getOne } = useRequest(Http, { manual: true, onSuccess: res => setDataOne(res.list[0]) })
    const { runAsync: getTwo } = useRequest(Http, {
        manual: true,
        onSuccess: res => {
            let data = []
            res.list.forEach(({ uuid, typeName, c110, c160, c300, c390, c410, c420 }) => {
                data = [
                    ...data,
                    { uuid, type: '收入', label: typeName, value: c110 },
                    { uuid, type: '税金及附加', label: typeName, value: c160 },
                    { uuid, type: '成本', label: typeName, value: c300 },
                    { uuid, type: '利润', label: typeName, value: c390 },
                ]
            })
            setDataTwo(data)
        },
    })
    const { runAsync: getThr } = useRequest(Http, {
        manual: true,
        onSuccess: res => {
            let data = []
            res.list.forEach(({ uuid, tableName, c110, c160, c300, c390, c410, c420 }) => {
                data = [
                    ...data,
                    { uuid, type: '收入', label: tableName, value: c110 },
                    { uuid, type: '税金及附加', label: tableName, value: c160 },
                    { uuid, type: '成本', label: tableName, value: c300 },
                    { uuid, type: '利润', label: tableName, value: c390 },
                    { uuid, type: '目标利润', label: tableName, value: c410 },
                    { uuid, type: '盈亏情况', label: tableName, value: c420 },
                ]
            })
            setDataThr(data)
        },
    })
    const { runAsync: getFou } = useRequest(Http, {
        manual: true,
        onSuccess: res => {
            let data = []
            res.list.forEach(({ uuid, eventDate, c110, c160, c300, c390, c410, c420 }) => {
                data = [
                    ...data,
                    { uuid, type: '收入', label: eventDate, value: c110 },
                    { uuid, type: '税金及附加', label: eventDate, value: c160 },
                    { uuid, type: '成本', label: eventDate, value: c300 },
                    { uuid, type: '利润', label: eventDate, value: c390 },
                    { uuid, type: '目标利润', label: eventDate, value: c410 },
                    { uuid, type: '盈亏情况', label: eventDate, value: c420 },
                ]
            })
            setDataFou(data)
        },
    })

    const [DataOne, setDataOne] = useState()
    const ListOne = [
        { uuid: 1, label: '累计营业收入', value: 'c110', unit: '万元', icon: 'zongtouzi' },
        { uuid: 2, label: '累计利润总额', value: 'c390', unit: '万元', icon: 'IconHoutaiShouyetouzikongjian' },
        {
            uuid: 3,
            label: '年度利润总额考核指标',
            value: 'c410',
            unit: '万元',
            icon: 'IconAHoutaiShouyetouzikongjianbeifen10',
        },
        { uuid: 4, label: '利润率', value: 'per', unit: '%', icon: 'IconChart78' },
    ]

    const [DataTwo, setDataTwo] = useState([])
    const [DataThr, setDataThr] = useState([])
    const [DataFou, setDataFou] = useState()

    useEffect(() => {
        getOne({ url: 'getProgressGetCost', data: { OrganizationUuid: uuid } })
        getTwo({ url: 'getTypeCostByCompanyUuid', data: { OrganizationUuid: uuid } })
        getThr({ url: 'getProjectCostListByCompanyUuid', data: { OrganizationUuid: uuid } })
        getFou({ url: 'getProjectMonthCostList', data: { OrganizationUuid: uuid } })
    }, [getFou, getOne, getThr, getTwo, uuid])

    return (
        <>
            <div className="left">
                <CommonSmallTitle title="成本情况" flex={325} style={{ marginBottom: 16 }}>
                    <div className="one">
                        {ListOne.map(({ uuid, label, value, unit, icon }) => (
                            <div key={uuid}>
                                {ICON[icon]}
                                <div>
                                    <div>{label}</div>
                                    <div>
                                        {DataOne ? DataOne[value] : 0} {unit}
                                    </div>
                                </div>
                            </div>
                        ))}
                    </div>
                </CommonSmallTitle>
                <CommonSmallTitle title="按类别成本统计" flex={565}>
                    <div className="two" ref={ChartTwo}>
                        {SizeTwo && (
                            <Column
                                {...complexColumnTemplate({
                                    size: SizeTwo,
                                    data: DataTwo,
                                    color: colorOne,
                                    isGroup: true,
                                    yTitle: '万元',
                                })}
                            />
                        )}
                    </div>
                </CommonSmallTitle>
            </div>
            <div className="right">
                <CommonSmallTitle title="按公司成本统计" style={{ marginBottom: 16 }}>
                    <div className="thr" ref={ChartThr}>
                        {SizeThr && OptionsEvent && (
                            <Column
                                {...complexColumnTemplate({
                                    size: SizeThr,
                                    data: DataThr,
                                    color: colorTwo,
                                    isGroup: true,
                                    yTitle: '万元',
                                })}
                                onReady={plot =>
                                    plot.on('plot:click', e => {
                                        const { x, y } = e
                                        const [{ data }] = plot.chart.getTooltipItems({ x, y })
                                        setOptionsCall({
                                            type: 'TableList',
                                            data: {
                                                uuid: data.uuid,
                                                title: '按公司成本统计明细',
                                                type: 'CompanyCostByOrganizationUuid',
                                                OptionsEvent: OptionsEvent,
                                            },
                                        })
                                    })
                                }
                            />
                        )}
                    </div>
                </CommonSmallTitle>
                <CommonSmallTitle title="按月年累计统计">
                    <div className="fou">
                        <div className="Charts" ref={ChartFou}>
                            {SizeFou && DataFou && (
                                <Line
                                    {...complexColumnTemplate({
                                        size: SizeFou,
                                        data: DataFou,
                                        color: colorThr,
                                        isGroup: true,
                                        yTitle: '万元',
                                        scrollbar: 80,
                                    })}
                                />
                            )}
                        </div>
                    </div>
                </CommonSmallTitle>
            </div>
            <FrontModalBox OptionsCall={OptionsCall} />
        </>
    )
}
